import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { max, range, scaleLinear, scaleBand, select, selectAll } from 'd3';

const getXScale = (data, width, height, margin) => {
  return scaleBand()
    .domain(range(data.length))
    .range([margin.left, width - margin.right]);
};
const getYScale = (data, width, height, margin) => {
  return scaleLinear()
    .domain([0, max(data)])
    .range([height - margin.bottom, margin.top]);
}

export default class BarsChart extends Component {

  static propTypes = {
    width: PropTypes.number,
    height: PropTypes.number,
    data: PropTypes.arrayOf(PropTypes.number),
    fill: PropTypes.string,
    margin: PropTypes.shape({
      top: PropTypes.number,
      right: PropTypes.number,
      bottom: PropTypes.number,
      left: PropTypes.number,
    }),
  }

  static defaultProps =  {
    fill: '#569e3d',
    margin: { top: 10, right: 10, bottom: 30, left: 40 },
  }

  constructor(props) {
    super(props);
    this.state = {};
  }

  renderXAxis() {
    const { width, height, data, margin } = this.props;
    const y = height - margin.bottom;
    const xScale = getXScale(data, width, height, margin);
    const bandwidth = xScale.bandwidth();
    const ticks = xScale.domain().map((entry, index) => {
      const x = xScale(index);
      return (
        <g className="x-axis-tick" key={`tick-${index}`}>
          <line x1={x + bandwidth / 2} x2={x + bandwidth / 2} y1={y} y2={y+6} stroke="#808080" />
          <text x={x + bandwidth / 2} y={y+18} textAnchor="middle" dominantBaseline="hanging">
            {index}
          </text>
        </g>
      )
    });
    return (
      <g className="x-axis">
        <line className="x-axis-line" x1={margin.left} y1={y} x2={width - margin.right} y2={y} stroke="#808080" />
        {ticks}
      </g>
    );
  }

  renderYAxis() {
    const { width, height, data, margin } = this.props;
    const xScale = getXScale(data, width, height, margin);
    const yScale = getYScale(data, width, height, margin);
    const xRange = xScale.range();
    const ticks = yScale.ticks(5).map((entry, index) => {
      const y = yScale(entry);
      return (
        <g className="y-axis-tick" key={`tick-${index}`}>
          <line x1={xRange[0] - 6} x2={xRange[0]} y1={y} y2={y} stroke="black"></line>
          <text x={xRange[0] -8} y={y} textAnchor="end" dominantBaseline="central">
            {entry}
          </text>
        </g>
      )
    });
    const y = height - margin.bottom;
    return (
      <g className="y-axis">
        <line className="y-axis-line" x1={margin.left} x2={margin.left} y1={y} y2={margin.bott} stroke="black" />
        {ticks}
      </g>
    )
  }

  /**
   * <g className="bars">
   <g className="bar" transform="translate(40, 0)">
   <rect y="10" height="260" width="42.75" fill="#569e3d"></rect>
   </g>
   <g className="bar" transform="translate(83.75, 0)">
   <rect y="104.59821428571428" height="165.40178571428572" width="42.75" fill="#569e3d"></rect>
   </g>
   */
  renderPath() {
    const {data, width, height, margin, fill} = this.props;
    const xScale = getXScale(data, width, height, margin);
    const yScale = getYScale(data, width, height, margin);
    const barWidth = xScale.bandwidth();
    const yRange = yScale.range();
    const ticks = data.map((entry, index) => {
      const transform = `translate(${margin.left + index * barWidth}, 0)`;
      return (
        <g className="bar" transform={transform} >
          <rect y={yScale(entry)} height={yRange[0] - yScale(entry)} width={barWidth -1} fill={fill}></rect>
        </g>
      )
    })
    return (
      <g className="bars">
        {ticks}
      </g>
    )
  }

  render() {
    const { width, height } = this.props;
    return (
      <div>
        <svg
          width={width}
          height={height}
        >
          {this.renderXAxis()}
          {this.renderYAxis()}
          {this.renderPath()}
        </svg>

      </div>
    );
  }
}
